<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- <p>{{ msg.split("").reverse().join("") }}</p>
      <p>{{ msg.split("").reverse().join("") }}</p>
      <p>{{ msg.split("").reverse().join("") }}</p>
      <p>{{ msg.split("").reverse().join("") }}</p> -->

      <!-- <p>{{ reverseMsg() }}</p>
      <p>{{ reverseMsg() }}</p>
      <p>{{ reverseMsg() }}</p>
      <p>{{ reverseMsg() }}</p> -->

      <p>{{ msg }}</p>
      <p>{{ reverseMsg }}</p>
      <p>{{ reverseMsg }}</p>
      <p>{{ reverseMsg }}</p>
      <p>{{ reverseMsg }}</p>
      <button @click="handleClick">btn</button>

      <ul>
        <li v-for="item in oddArr">{{ item }}</li>
      </ul>
    </div>

    <script src="../../Vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          msg: "hello Vue!",
          arr: [1, 2, 3, 4, 5, 6, 7, 8],
          count: 5,
        },
        methods: {
          // reverseMsg() {
          //   console.log(1);
          //   return this.msg.split("").reverse().join("");
          // },
          handleClick() {
            // this.msg = this.msg + 5;
            // this.arr.push(9);
            // this.reverseMsg = "hi";
          },
        },

        // 计算属性
        // 里面写的是函数，里面的函数必须要有返回值

        // 要通过现有的响应式数据，计算出或者说过滤出一个新的值的时候，并且要不改变响应式数据，可以使用计算属性

        // 计算属性是有缓存的，缓存的是返回值， 只有当依赖发生改变的时候才会再次计算
        // 计算属性需要有依赖，响应式数据就是它的依赖

        // 一个计算属性是可以同时依赖多个响应式数据的, 还可以依赖其他的计算属性

        // 不能直接修改计算属性，改变计算属性唯一的方式是修改它的依赖

        // 计算属性不能写异步
        computed: {
          reverseMsg() {
            console.log(1);
            return this.msg.split("").reverse().join("") + this.count;
          },
          oddArr() {
            return this.arr.filter((item) => item % 2);
          },
          doubleOddArr() {
            return [...this.oddArr, ...this.oddArr];
          },
        },
      });
    </script>
  </body>
</html>
